<template>
	<div class="frame-body">
		<div class="container">
			<div class="left-menu">
				<div class="left-menu-stage">
					<div class="left-menu-scene">
						<div class="menu-title">
							<span>项目管理</span>
						</div>
						<div class="menu-list">
							<a-menu style="width: 208px;background-color:#efefef;" :default-selected-keys="['1']" :open-keys.sync="openKeys"
									mode="inline" @click="handleClick()">
								<a-menu-item key="sub1" @titleClick="titleClick">
									<div class="nav-title">概况</div>
								</a-menu-item>

								<a-menu-item key="sub2" @titleClick="titleClick">
									<div class="nav-title">回收站</div>
								</a-menu-item>

								<a-menu-item key="sub3" @titleClick="titleClick">
									<div class="nav-title">待处理事件</div>
								</a-menu-item>

								<a-menu-item key="sub4" @titleClick="titleClick">
									<div class="nav-title">事件历史记录</div>
								</a-menu-item>
							</a-menu>
						</div>
					</div>
				</div>
			</div>
			<div class="right-container">
				<div class="right-container-stage" v-show="isView==false">
					<div id="sub-app">
						<a-alert style="margin:8px 16px;text-align:left;" message="提示用的文字区域" type="info" close-text="x" />
						<div class="page-body">
							<a-tabs default-active-key="1" @change="callback" size="small">
								<a-tab-pane key="1" tab="概览">
									<div class="overview">
										<div class="dashboard-main">

											<a-card title="我的项目">
												<div class="btn_grp" slot="extra">
													<a-dropdown>
														<a-menu slot="overlay" @click="handleMenuClick">
															<a-menu-item key="1">
																1st item
															</a-menu-item>
															<a-menu-item key="2">
																2nd item
															</a-menu-item>
															<a-menu-item key="3">
																3rd item
															</a-menu-item>
														</a-menu>
														<a-button type="link"> 更多操作
															<a-icon type="down" />
														</a-button>
													</a-dropdown>
													<a-button shape="circle" type="link" icon="loading-3-quarters" />
												</div>
												<div class="card-content">
													<div class="my-project-head">
														<div style="width:70%">
															<a-input-search></a-input-search>
														</div>
														<div style="white-space: nowrap; margin-left: 16px;">
															<a-button type="primary" @click="showDrawer()">
																创建项目
															</a-button>
														</div>
													</div>
													<div class="ingi-list-table">
														<div class="list-table-header">
															<div class="th name"><div class="title">项目名称</div></div>
															<div class="th period"><div class="title">执行周期</div></div>
															<div class="th actions"><div class="title">操作</div></div>
														</div>
														<div class="list-table-body">
															 <a-skeleton :loading="loading">
															<a-collapse v-model="activeKey" :bordered="false" :accordion="true">
																<template v-for="(item,index) in data">
																	<a-collapse-panel :key="item.key" :showArrow="false">
																		<div slot="header" class="list-table-body-row">
																			<div class="td name"><div class="title">{{item.name}}</div></div>
																			<div class="td period">
																				{{item.cycle}}
																			</div>
																			<div class="td actions">
																				<a-button-group size="small">
																					<a-button type="link">
																						查看
																					</a-button>
																					<a-button type="link">
																						编辑
																					</a-button>
																				</a-button-group>
																			</div>
																		</div>
																		<a-card title="Default size card" style="width: 300px">
																			<a slot="extra" href="#">more</a>
																			<p>card content</p>
																			<p>card content</p>
																			<p>card content</p>
																		</a-card>
																	</a-collapse-panel>
																</template>
															</a-collapse>
															</a-skeleton>
														</div>
														<div class="list-table-footer"></div>
													</div>


													<a-pagination v-model="current" :total="total" show-less-items />
													<!-- <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns"
													 :data-source="data">
														<span slot="action" slot-scope="text, record">
															<a-button size="small" style="margin-right: 10px;" type="primary">
																审核
															</a-button>
															<a-button size="small" style="margin-right: 10px;" type="danger">
																删除
															</a-button>
															<a-button @click="isView=true" size="small" style="margin-right: 10px;" type="default">
																查看
															</a-button>
														</span>
													</a-table> -->
												</div>
											</a-card>

										</div>
										<aside class="dashboard-side">
											<a-card title="快速操作"></a-card>
											<a-card title="申请与审批"></a-card>
											<a-card title="资源库"></a-card>
											<a-card title="技术支援"></a-card>
										</aside>
									</div>
								</a-tab-pane>
								<a-tab-pane key="2" tab="资源查看">
									<screen />
								</a-tab-pane>
							</a-tabs>
						</div>
					</div>
				</div>
				<div class="right-container-stage" v-show="isView">
					这里是详情
				</div>
			</div>
			<a-drawer title="Create a new account" :width="720" :visible="visible" :body-style="{ paddingBottom: '80px' }"
					  @close="onClose">
				<a-steps :current="stepCurrent" size="small">
					<a-step title="基础信息" />
					<a-step title="补充信息" />
					<a-step title="验证信息" />
				</a-steps>
				<a-form-model 
					ref="ruleForm"
					:model="project"
					:rules="rules"   layout="vertical" hide-required-mark>
					<div v-show="stepCurrent === 0">
						<a-row :gutter="16" style="margin-top: 20px;">
							<a-col :span="12">
								<a-form-model-item label="项目名称" prop="name">
									<a-input v-model="project.name"
											 placeholder="请输入项目名称" />
								</a-form-model-item>
							</a-col>
							<a-col :span="12">
								<!-- :default-value="['a1', 'b2']" -->
								<a-form-model-item label="项目督导人员" prop="supervisor">
									<a-select 
									mode="multiple"  @change="supervisorChange">
										<a-select-option v-for="item in supervisor" :key=" item.name ">
											{{item.name}}
										</a-select-option>
									</a-select>
								</a-form-model-item>
							</a-col>
						</a-row>
						<a-row :gutter="16">
							<a-col :span="12">
								<a-form-model-item label="项目编码" prop="code">
									<a-input v-model="project.code"
											 placeholder="请输入项目编码" />
								</a-form-model-item>
							</a-col>
							<a-col :span="12">
								<!-- :default-value="['a1', 'b2']" -->
								<a-form-model-item label="准入机构行政人员" prop="administrationUser">
									<a-select 
									 mode="multiple" @change="administrationChange">
										<a-select-option v-for="item in administration" :key=" item.name " >
											{{item.name}}
										</a-select-option>
									</a-select>
								</a-form-model-item>
							</a-col>
						</a-row>					
						<a-row :gutter="16">
							<a-col :span="24">
								<a-form-model-item label="项目周期" prop="cycle">
									<a-range-picker v-model="project.cycle"
												:locale="locale"
												format="YYYY-MM-DD"
												:disabled-date="disabledDate"
												show-time
												@change="onChange" >
										
									</a-range-picker>
								</a-form-model-item>
							</a-col>
						</a-row>
					</div>
					 <div v-show="stepCurrent === 1">
						<a-row :gutter="16" style="margin-top: 20px;">
							<a-col :span="12">
								<a-form-model-item label="个人档案数" prop="personalFiles">
									<a-input  v-model = "project.personalFiles"
											type="number"
											 placeholder="请输入个人档案数" />
								</a-form-model-item>
							</a-col>
							<a-col :span="12">
								
								<a-form-model-item label="个案数" prop="personalCase">
									<a-input  v-model="project.personalCase"
											type="number"
											 placeholder="请输入个案数" />
								</a-form-model-item>
							</a-col>
						</a-row>
						<a-row :gutter="16" style="margin-top: 20px;">
							<a-col :span="12">
								<a-form-model-item label="咨询服务对象数" prop="consultServicePerson">
									<a-input v-model="project.consultServicePerson"
											type="number"
											 placeholder="请输入咨询服务对象数" />
								</a-form-model-item>
							</a-col>
							<a-col :span="12">
								
								<a-form-model-item label="咨询次数" prop="consultServiceCount">
									<a-input  v-model="project.consultServiceCount"
											type="number"
											 placeholder="请输入咨询次数" />
								</a-form-model-item>
							</a-col>
						</a-row>
						
						<a-row :gutter="16" style="margin-top: 20px;">
							<a-col :span="12">
								<a-form-model-item label="长期探访服务对象数" prop="longtimeServicePerson">
									<a-input  v-model="project.longtimeServicePerson"
											type="number"
											 placeholder="请输入长期探访服务对象数" />
								</a-form-model-item>
							</a-col>
							<a-col :span="12">
								
								<a-form-model-item label="长期探访次数" prop="longtimeServiceCount">
									<a-input v-model="project.longtimeServiceCount"
											type="number"
											 placeholder="请输入长期探访次数" />
								</a-form-model-item>
							</a-col>
						</a-row>
						
						<a-row :gutter="16" style="margin-top: 20px;">
							<a-col :span="12">
								<a-form-model-item label="危机介入数" prop="dangerService">
									<a-input  v-model="project.dangerService"
											type="number"
											 placeholder="请输入危机介入数" />
								</a-form-model-item>
							</a-col>
						</a-row>
						<a-row :gutter="16" style="margin-top: 20px;">
							<a-col :span="24">
								<a-form-model-item label="项目相关图片">
									<a-upload
									      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
									      list-type="picture-card"
									      :file-list="fileList"
									      @preview="handlePreview"
									      @change="handleChange"
									    >
									      <div v-if="fileList.length < 8">
									        <a-icon type="plus" />
									        <div class="ant-upload-text">
									          Upload
									        </div>
									      </div>
									    </a-upload>
									    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
									      <img alt="example" style="width: 100%" :src="previewImage" />
									    </a-modal>
								</a-form-model-item>
							</a-col>
						</a-row>
					</div>
					<div v-show="stepCurrent === 2">
						<a-row :gutter="16" style="margin-top: 20px;">
							<h2>基础信息</h2>
						</a-row>
						<a-row :gutter="16" style="margin-top: 20px;">
							<a-col :span="12">
								<a-form-model-item  label="项目名称" prop="name">
									<a-input v-model="project.name"
									 placeholder="请输入项目名称" />
								</a-form-model-item >
							</a-col>
							<a-col :span="12">
									<a-form-model-item label="项目编码" prop="code">
										<a-input v-model="project.code"
											placeholder="请输入项目编码" />
									</a-form-model-item>
								</a-col>
						</a-row>
						<a-row :gutter="16">
							<a-col :span="24">
								<a-form-model-item label="项目周期" prop="cycle">
									<a-range-picker v-model="project.cycle"
										:locale="locale"
										format="YYYY-MM-DD"
										show-time
										:disabled-date="disabledDate"
									   @change="onChange" >
								
									</a-range-picker>
								</a-form-model-item>
							</a-col>
						</a-row>
						
						<a-row :gutter="16" style="margin-top: 20px;">
							<h2>服务指标</h2>
						</a-row>
						<a-row :gutter="16" style="margin-top: 20px;">
							<a-col :span="12">
								<a-form-model-item label="个人档案数" prop="personalFiles">
									<a-input v-model = "project.personalFiles"
										type="number"
									 placeholder="请输入个人档案数" />
								</a-form-model-item>
							</a-col>
							<a-col :span="12">
								
								<a-form-model-item label="个案数" prop="personalCase">
									<a-input v-model="project.personalCase"
											type="number"
											 placeholder="请输入个案数" />
								</a-form-model-item>
							</a-col>
						</a-row>
						<a-row :gutter="16" style="margin-top: 20px;">
							<a-col :span="12">
								<a-form-model-item label="咨询服务对象数" prop="consultServicePerson">
									<a-input v-model="project.consultServicePerson"
											type="number"
											 placeholder="请输入咨询服务对象数" />
								</a-form-model-item>
							</a-col>
							<a-col :span="12">
								
								<a-form-model-item label="咨询次数" prop="consultServiceCount">
									<a-input v-model="project.consultServiceCount"
											type="number"
											 placeholder="请输入咨询次数" />
								</a-form-model-item>
							</a-col>
						</a-row>
						
						<a-row :gutter="16" style="margin-top: 20px;">
							<a-col :span="12">
								<a-form-model-item label="长期探访服务对象数" prop="longtimeServicePerson">
									<a-input v-model="project.longtimeServicePerson"
											type="number"
											 placeholder="请输入长期探访服务对象数" />
								</a-form-model-item>
							</a-col>
							<a-col :span="12">
								
								<a-form-model-item label="长期探访次数" prop="longtimeServiceCount">
									<a-input v-model="project.longtimeServiceCount"
											type="number"
											 placeholder="请输入长期探访次数" />
								</a-form-model-item>
							</a-col>
						</a-row>
						
						<a-row :gutter="16" style="margin-top: 20px;">
							<a-col :span="12">
								<a-form-model-item label="危机介入数" prop="dangerService">
									<a-input v-model="project.dangerService"
											type="number"
											 placeholder="请输入危机介入数" />
								</a-form-model-item>
							</a-col>
								
						</a-row>
						
						<a-row :gutter="16" style="margin-top: 20px;">
							<h2>相关人员</h2>
						</a-row>
						
						<a-row :gutter="16" style="margin-top: 20px;">
							<a-col :span="12">
								
								<a-form-model-item label="项目督导人员" prop="supervisor">
									<a-select v-model="project.supervisor"
									 mode="multiple"
									 @change="multiSelectChangge">
										<a-select-option v-for="item in supervisor" :key=" item.name ">
											{{item.name}}
										</a-select-option>
									</a-select>
								</a-form-model-item>
							</a-col>
							
							<a-col :span="12">
								
								<a-form-model-item label="准入机构行政人员" prop="administrationUser">
									<a-select v-model="project.administrationUser"
										mode="multiple" @change="multiSelectChangge">
										<a-select-option v-for="item in administration" :key=" item.name " >
											{{item.name}}
										</a-select-option>
									</a-select>
								</a-form-model-item>
							</a-col>
							
						</a-row>
						<a-row :gutter="16" style="margin-top: 20px;">
							<h2>相关图片信息</h2>
						</a-row>
						<a-row :gutter="16" style="margin-top: 20px;">
							<a-col :span="24">
								<a-form-model-item label="项目相关图片">
									<a-upload
											v-model="project.images"
									      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
									      list-type="picture-card"
									      :file-list="fileList"
									      @preview="handlePreview"
									      @change="handleChange"
									    >
									      <div v-if="fileList.length < 8">
									        <a-icon type="plus" />
									        <div class="ant-upload-text">
									          Upload
									        </div>
									      </div>
									    </a-upload>
									    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
									      <img alt="example" style="width: 100%" :src="previewImage" />
									    </a-modal>
								</a-form-model-item>
							</a-col>
						</a-row>
						
					</div>
				</a-form-model>
				
				<div :style="{
	          position: 'absolute',
	          right: 0,
	          bottom: 0,
	          width: '100%',
	          borderTop: '1px solid #e9e9e9',
	          padding: '10px 16px',
	          background: '#fff',
	          textAlign: 'right',
	          zIndex: 1,
	        }">
					<a-button :style="{ marginRight: '8px' }" @click="onClose">
						取消
					</a-button>
					<a-button type="primary" v-show="stepCurrent>0"  :style="{ marginRight: '8px' }"  @click="goPre">
						上一步
					</a-button>
					<a-button type="primary" v-show="stepCurrent !== 2"  :style="{ marginRight: '8px' }"  @click="goNext">
						下一步
					</a-button>
					<a-button type="danger" v-show="stepCurrent === 2" @click="onSubmit" >
						提交
					</a-button>
				</div>
			</a-drawer>
		</div>
	</div>
</template>
<script>
	import Vue from 'vue'
	import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
	import moment from 'moment';
	import {projectList,
		getSupervisor,
		getAdministration,
		createProject,
		getProjectByRole} from '@/api/list.js'
	import screen from '../../../components/screen'
	function getBase64(file) {
	  return new Promise((resolve, reject) => {
	    const reader = new FileReader();
	    reader.readAsDataURL(file);
	    reader.onload = () => resolve(reader.result);
	    reader.onerror = error => reject(error);
	  });
	};
	const columns = [{
		title: '项目标题',
		dataIndex: 'name',
	},
		{
			title: '执行周期',
			dataIndex: 'age',
		},
		{
			title: '操作',
			key: 'action',
			scopedSlots: {
				customRender: 'action'
			},
		},
	];

	const data = [];
	export default {
		components:{
			screen
		},
		data() {
			return {
				current: 1,
				openKeys: ['sub1'],
				data,
				columns,
				isView:false,
				form: this.$form.createForm(this),
				visible: false,
				start: '',
				selectedRowKeys: [], // Check here to configure the default column
				loading: true,
				activeKey:[],
				listQurey:{
					page:1,
					size:10
				},
				total:0,
				stepCurrent:0,
				previewVisible: false,
				previewImage: '',
				fileList: [
				      ],
				supervisor:[],
				administration:[],
				 rules: {
				        name: [
				          { required: true, message: '请输入项目名称', trigger: 'blur' },
				          { min: 2, max: 50, message: '长度为3到50个字符', trigger: 'blur' },
				        ],
						code:[
							{ required: true, message: '请输入项目编码', trigger: 'blur' },
						],
						cycle:[
							{ required: true, message: '请选择项目周期', trigger: 'blur' },
						],
						personalCase:[
							{ required: true, message: '请输入个案数', trigger: 'blur' },
						],
						personalFiles:[
							{ required: true, message: '请输入个人档案数', trigger: 'blur' },
						],
						consultServicePerson:[
							{ required: true, message: '请输入咨询服务对象数', trigger: 'blur' },
						],
						consultServiceCount:[
							{ required: true, message: '请输入咨询次数', trigger: 'blur' },
						],
						longtimeServicePerson:[
							{ required: true, message: '请输入长期服务对象数', trigger: 'blur' },
						],
						longtimeServiceCount:[
							{ required: true, message: '请输入长期服务次数', trigger: 'blur' },
						],
						dangerService:[
							{ required: true, message: '请输入危机介入数', trigger: 'blur' },
						],
						supervisor:[
							{ required: true, message: '请选择项目督导', trigger: 'blur' },
						],
						administrationUser:[
							{ required: true, message: '请选择准入机构行政人员', trigger: 'blur' },
						],
					},
				project:{
					
				},
				locale,
				dateRange:''
				
			};
		},
		watch: {
			openKeys(val) {
				console.log('openKeys', val);
			},
		},
		computed: {
			hasSelected() {
				return this.selectedRowKeys.length > 0;
			},
		},
		created () {
			// 测试获取用户
		 // console.log("test");
		 // const user =JSON.parse(localStorage.getItem('user'));
		 // console.log(user);
		 // 测试获取用户选择登录的角色
		 // 角色id对应的角色说明在README文件中
		 // console.log(localStorage.getItem('roleId'));
		 this.getProject();
		 this.getSupervisorAndAdmin();
		},
		methods: {
			callback(){},
			handleMenuClick(){},
			showDrawer() {
				// 设置只有机构管理员能够创建项目,存入localStorage里取出来的是字符串
				if(localStorage.getItem('roleId') === '46' ){
					this.visible = true;
				}else{
					
					  this.$notification.error({
					    message: '无创建项目权限',
					    description: `您当前登录的角色不是机构管理员，不能创建项目`
					  })	
				}
				
			},
			onClose() {
				 this.$refs.ruleForm.resetFields();
				 this.stepCurrent = 0;
				 this.visible = false;
			},
			onSubmit(){
				console.log(this.project);
				 this.$refs.ruleForm.validate(valid => {
				        if (valid) {
							
							delete this.project.cycle; // 直接赋值的话，控制台报错太难看
							 this.project.cycle=this.dateRange;
							createProject(this.project)
							.then(res =>{
								if(res.code==200){
									this.visible = false;
									this.$notification.success({
									  message: 'success',
									  description: `项目创建成功`
									})
									this.getProject();
								}else{
									this.visible = false;
									this.$notification.error({
									  message: 'erroe',
									  description: `创建失败，服务器异常`
									})	
								}
							})
						 
				        } else {
				          console.log('error submit!!');
				          return false;
				        }
				    });
			},
			handleClick(e) {
				console.log('click', e);
			},
			titleClick(e) {
				console.log('titleClick', e);
			},
			onSelectChange(selectedRowKeys) {
				console.log('selectedRowKeys changed: ', selectedRowKeys);
				this.selectedRowKeys = selectedRowKeys;
			},
			getProject(){
				if(localStorage.getItem('roleId') === '46'){
					projectList(this.listQurey)
					.then( res =>{
						this.loading=false;
						this.data=res.data.records;
						this.total=res.data.total;
					})
				}else{
					// 非机构管理员时
					const parameter={
						id: JSON.parse(localStorage.getItem('user')).id,
						roleId: localStorage.getItem('roleId')
					};
					getProjectByRole(parameter)
					.then( res =>{
						this.loading=false;
						this.data=res.data;
						this.total=res.data.length;
						if(res.data.length ===0){
							this.$notification.error({
							  message: '无关联的项目',
							  description: `您当前登录的角色没有关联的项目`
							})	
						}
					})
					
				}
				
			},
			goNext(){
				this.stepCurrent = this.stepCurrent + 1;
			},
			goPre(){
				this.stepCurrent = this.stepCurrent - 1;
			},
			handleCancel() {
			      this.previewVisible = false;
			    },
			async handlePreview(file) {
			    if (!file.url && !file.preview) {
			        file.preview = await getBase64(file.originFileObj);
			    }
			      this.previewImage = file.url || file.preview;
			      this.previewVisible = true;
			},
			handleChange({ fileList }) {
			      this.fileList = fileList;
				  console.log(fileList)
				  // this.ingi-project.images=[];
				  // for(var i=0;i<fileList.length;i++){
					 //  this.ingi-project.images.push(fileList[i].url)
				  // }
			},
			multiSelectChangge(value){
				 console.log(value);
			},
			supervisorChange(value){
				this.project.supervisor=value;
			},
			administrationChange(value){
				this.project.administrationUser=value;
			},
			// 获取可选的项目督导和准入机构行政人员
			getSupervisorAndAdmin(){
				getSupervisor()
				.then(res =>{
					this.supervisor= res.data
				});
				
				getAdministration()
				.then(res =>{
					this.administration = res.data
				});
			},
			// 时间范围选择改变
			 onChange(date, dateString) {
			      // console.log(date, dateString);
				  console.log(dateString) // 这里时两个时间格式化的字符串组成的数组
				  this.dateRange=dateString[0]+'至'+ dateString[1]
				  console.log(this.dateRange)
			},
			disabledDate(current) {
			      // Can not select days before today and today
			      return current && current <= moment().endOf('day');
			}
				
		
		},
	};
</script>
